<template>
  <view class="quota-container">
    <!-- 加载状态 -->
    <view v-if="isLoading" class="loading">
      <text>加载中...</text>
    </view>
    
    <!-- 内容区域 -->
    <view v-else>
      <view class="quota-card">
        <text class="title">AI翻译额度</text>
        <view class="progress-container">
          <text class="quota-text">{{ usedChars.toLocaleString() }}/{{ totalChars.toLocaleString() }}字</text>
          <progress 
            :percent="(usedChars / totalChars * 100).toFixed(1)" 
            activeColor="#f5cd5c" 
            class="progress-bar"
          />
        </view>
        <text class="tip">每日0点重置额度</text>
      </view>
      
      <view class="vip-tip" v-if="!isVip">
        <text>升级VIP可获得100,000字额度</text>
        <button class="upgrade-btn" @click="goToVip">立即升级</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      usedChars: 0, // 已使用字数（实际开发中应从后台获取）
      isVip: false,     // VIP状态（实际开发中应从后台获取）
      totalChars: 7000 ,// 总额度（VIP用户为100000）
	  isLoading:true
    }
  },
  onLoad() {
    this.loadQuotaData()
  },
  methods: {
	  //获取额度数据
    async loadQuotaData() {
      try {
              const res = await uni.request({
                url: '/api/getTranslationQuota',
                method: 'GET'
              })
              
              if (res.statusCode === 200) {
                this.isVip = res.data.isVip
                this.usedChars = res.data.usedChars
                this.totalChars = this.isVip ? 100000 : 7000
              }
            } catch (err) {
              uni.showToast({
                title: '获取数据失败',
                icon: 'none'
              })
            } finally {
              this.isLoading = false
            }
    },
	 // 记录使用字数（在文档上传成功后调用）
	    async recordUsage(charsUsed) {
	      try {
	        await uni.request({
	          url: '/api/recordTranslationChars',
	          method: 'POST',
	          data: {
	            chars: charsUsed
	          }
	        })
	        // 重新加载最新数据
	        this.loadQuotaData() 
	      } catch (err) {
	        console.error('记录使用量失败:', err)
	      }
	    },
		
    goToVip() {
      uni.navigateTo({
        url: '/pages/my/vip'
      })
    }
  }
}
</script>

<style>
.quota-container {
  padding: 40rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.quota-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 40rpx;
  margin-bottom: 30rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 30rpx;
}

.progress-container {
  margin-bottom: 20rpx;
}

.quota-text {
  font-size: 32rpx;
  color: #666;
  display: block;
  margin-bottom: 20rpx;
}

.progress-bar {
  width: 100%;
}

.tip {
  font-size: 26rpx;
  color: #999;
  display: block;
  text-align: center;
}

.vip-tip {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  text-align: center;
}

.vip-tip text {
  font-size: 28rpx;
  color: #666;
  display: block;
  margin-bottom: 20rpx;
}

.upgrade-btn {
  background: #f5cd5c;
  color: #333;
  font-size: 30rpx;
  border-radius: 50rpx;
  padding: 20rpx 0;
}

.loading {
  height: 200rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 28rpx;
  color: #999;
}

/* 数字千分位样式 */
.quota-text {
  font-family: monospace; /* 等宽字体对齐更美观 */
}
</style>